<template>
  <div class="language-rank-container">

    <div class="box">

      <div class="rank-box rank-box-title">
        <div class="index tvc">
          <IconAli :sty="{width:'20px',height:'20px',marginTop:'2px'}" icon='rank'></IconAli>
        </div>
        <div class="name tvc">
          <div class="name-text">
            编程语言
          </div>

          <div class="link-box" @click="goRank()">
            <div class="text">查看更多</div>
            <div class="icon">
              <IconAli :sty="{width:'20px',height:'20px',marginTop:'0px'}" icon='right-top'></IconAli>
            </div>
          </div>
        </div>
        <div class="rate tvc">
          <IconAli :sty="{width:'26px',height:'26px',marginTop:'2px'}" icon='rate'></IconAli>
        </div>
        <!--        <div class="changeRate tvc">
                  同比
                </div>
                <div class="change tvc">
                  对比
                </div>-->
      </div>
      <div v-for="(obj,i) in languageRankList" :key="obj.id">
        <div class="rank-box">
          <div class="index tvc">
            <span :class="{'fir':i==0,'sec':i==1,'th':i==2}">{{ i + 1 }}</span>
          </div>
          <div class="name tvc">
            <img :src="imgSrc(obj.name)"
                 style="display:inline-block;width: 30px;height: 30px;border: 1px solid #AAA;border-radius:50%;margin-top:5px">
            <div :class="{'red':obj.name=='Java'}" style="padding-left: 6px">{{ obj.name }}</div>
          </div>
          <div class="rate tvc">
            {{ obj.rate }}
          </div>
          <!--          <div class="changeRate tvc">
                      {{ obj.changeRate }}
                    </div>
                    <div class="change tvc">
                      {{ obj.change }}
                    </div>-->
        </div>

      </div>

    </div>

  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";

import Python from "@/assets/icon/Python.png"
import C from "@/assets/icon/C.png"
import Java from "@/assets/icon/Java.png"
import C__ from "@/assets/icon/C__.png"
import C_ from "@/assets/icon/C_.png"
import Visual_Basic from "@/assets/icon/Visual_Basic.png"
import JavaScript from "@/assets/icon/JavaScript.png"
import Assembly_language from "@/assets/icon/Assembly_language.png"
import SQL from "@/assets/icon/SQL.png"
import PHP from "@/assets/icon/PHP.png"
import Classic_Visual_Basic from "@/assets/icon/Classic_Visual_Basic.png"
import Groovy from "@/assets/icon/Groovy.png"
import Ruby from "@/assets/icon/Ruby.png"
import Swift from "@/assets/icon/Swift.png"
import R from "@/assets/icon/R.png"
import Perl from "@/assets/icon/Perl.png"
import Delphi_Object_Pascal from "@/assets/icon/Delphi_Object_Pascal.png"
import Go from "@/assets/icon/Go.png"
import Fortran from "@/assets/icon/Fortran.png"
import Matlab from "@/assets/icon/Matlab.png"

export default {
  //组件名称
  name: "LanguageRank",
  props: [],
  //组件注册
  components: {IconAli},
  //数据驱动
  data() {
    return {
      Python: Python,
      C: C,
      Java: Java,
      C__: C__,
      C_: C_,
      Visual_Basic: Visual_Basic,
      JavaScript: JavaScript,
      Assembly_language: Assembly_language,
      SQL: SQL,
      PHP: PHP,
      Classic_Visual_Basic: Classic_Visual_Basic,
      Groovy: Groovy,
      Ruby: Ruby,
      Swift: Swift,
      R: R,
      Perl: Perl,
      Delphi_Object_Pascal: Delphi_Object_Pascal,
      Go: Go,
      Fortran: Fortran,
      Matlab: Matlab,
      languageRankList: [
        {id: "1", name: "Python", rate: "11.77%", changeRate: "-0.35%", change: "1"},
        {id: "2", name: "C", rate: "11.77%", changeRate: "-0.35%", change: "1"},
        {id: "3", name: "Java", rate: "11.77%", changeRate: "-0.35%", change: "1"},
        {id: "4", name: "C++", rate: "11.77%", changeRate: "-0.35%", change: "1"},
        {id: "5", name: "Delphi/Object Pascal", rate: "11.77%", changeRate: "-0.35%", change: "1"},
        {id: "6", name: "C#", rate: "11.77%", changeRate: "-0.35%", change: "1"},
        {id: "7", name: "Classic Visual Basic", rate: "11.77%", changeRate: "-0.35%", change: "1"},
        {id: "8", name: "JavaScript", rate: "11.77%", changeRate: "-0.35%", change: "1"},
        {id: "9", name: "SQL", rate: "11.77%", changeRate: "-0.35%", change: "1"},
        {id: "10", name: "Assembly Language", rate: "11.77%", changeRate: "-0.35%", change: "1"},
        /*     {id: "11", name: "PHP", rate: "11.77%", changeRate: "-0.35%", change: "1"},
             {id: "12", name: "Groovy", rate: "11.77%", changeRate: "-0.35%", change: "1"},
             {id: "13", name: "Ruby", rate: "11.77%", changeRate: "-0.35%", change: "1"},
             {id: "14", name: "Swift", rate: "11.77%", changeRate: "-0.35%", change: "1"},
             {id: "15", name: "R", rate: "11.77%", changeRate: "-0.35%", change: "1"},
             {id: "16", name: "Perl", rate: "11.77%", changeRate: "-0.35%", change: "1"},
             {id: "17", name: "Go", rate: "11.77%", changeRate: "-0.35%", change: "1"},
             {id: "18", name: "Fortran", rate: "11.77%", changeRate: "-0.35%", change: "1"},
             {id: "19", name: "Matlab", rate: "11.77%", changeRate: "-0.35%", change: "1"},
             {id: "20", name: "Visual Basic", rate: "11.77%", changeRate: "-0.35%", change: "1"},*/
      ]
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    imgSrc(name) {
      switch (name) {
        case "Python":
          return this.Python;
        case "C":
          return this.C;
        case "Java":
          return this.Java;
        case "C++":
          return this.C__;
        case "C#":
          return this.C_;
        case "Visual Basic":
          return this.Visual_Basic;
        case "JavaScript":
          return this.JavaScript;
        case "Assembly Language":
          return this.Assembly_language;
        case "SQL":
          return this.SQL;
        case "PHP":
          return this.PHP;
        case "Classic Visual Basic":
          return this.Classic_Visual_Basic;
        case "Groovy":
          return this.Groovy;
        case "Ruby":
          return this.Ruby;
        case "Swift":
          return this.Swift;
        case "R":
          return this.R;
        case "Perl":
          return this.Perl;
        case "Delphi/Object Pascal":
          return this.Delphi_Object_Pascal;
        case "Go":
          return this.Go;
        case "Fortran":
          return this.Fortran;
        case "Matlab":
          return this.Matlab;
        default:
          return "";
      }
      return "";
    },
    goRank(){
      window.open("https://www.tiobe.com/tiobe-index/", "_blank")
      window.open("https://www.baidu.com", "_blank")
    }
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.language-rank-container {
  width: 100%;

  .rank-box-title {
    height: 50px !important;

    div {
      font-size: 18px;
      //font-weight: bolder;
      color: #333;
      padding-top: 4px;
    }

    .name {
      display: flex;
      justify-content: space-between;

      .name-text{
        font-size: 16px;
      }

      .link-box {
        display: flex;
        cursor: pointer;
        margin-left: 40px;
        margin-top: -6px;

        .text {
          font-size: 14px;
          color: #57a3f3;
        }
        .icon{
        }
      }
    }
  }

  .rank-box {

    border-bottom: 1px solid #AAA;
    height: 40px;
    display: flex;

    .tvc {
      line-height: 40px;
    }

    .index {
      max-width: 100px;
      width: 20%;
    }

    .name {
      width: 60%;
      text-align: left;
      display: flex;
    }

    .rate {
      //width: 70px;
      width: 20%;
    }

    .changeRate {
      //width: 70px;
      width: 0%;
    }

    .change {
      //width: 40px;
      width: 0%;
    }
  }

  .fir {
    color: #F00;
  }

  .sec {
    color: #F60;
  }

  .th {
    color: #FAA90E;
  }

  .red {
    color: #F00;
    font-weight: bolder;
    font-size: 20px;
  }
}
</style>